<template>
  <div class="onenumbox">
    <div
      class="numlist"
      :style="{
        animation: `rolling-${num} 3s ease forwards`,
      }"
    >
      <div class="numitem">0</div>
      <div class="numitem">1</div>
      <div class="numitem">2</div>
      <div class="numitem">3</div>
      <div class="numitem">4</div>
      <div class="numitem">5</div>
      <div class="numitem">6</div>
      <div class="numitem">7</div>
      <div class="numitem">8</div>
      <div class="numitem">9</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  // import { watchEffect, ref } from 'vue';

  defineProps({
    num: {
      type: Number,
      required: true,
    },
  });

  // let numClass = ref(`numlist rolling-${props.num}`);

  // watchEffect(() => {
  //   numClass = ref(`numlist rolling-${props.num}`);
  // });
</script>
<style lang="scss" scoped>
  .onenumbox {
    height: 36px;
    width: 32px;
    display: inline-block;
    background-image: url('@/assets/img/img1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    position: relative;

    .numlist {
      color: red;
      position: absolute;
      width: 100%;
      transform: translate3d(0, 0, 0);

      .numitem {
        height: 36px;
        width: 32px;
        text-align: center;
        font-size: 32px;
        font-family: D-DIN-Bold;

        color: #51aeff;
        line-height: 36px;
      }
    }

    .dotbox {
      height: 36px;
      width: 100%;
      position: absolute;

      .dot {
        font-size: 32px;
        font-family: D-DIN-Bold;

        color: #51aeff;
        line-height: 36px;
        text-align: right;
        padding-right: 4px;
      }
    }
  }
</style>
